<template>
  <div
    class="page_footnote noneditable irremovable"
    contenteditable="false"
    :style="{ display: footnotes.length > 0 ? 'block' : 'none' }"
  >
    <hr align="left" />
    <template v-for="item in footnotes">
      <p
        class="item_footnote zh in-footer"
        :data-number="item.contentNumber"
        :data-referred-id="item.dataId"
        data-lang="zh"
        :key="item.dataId + '-zh'"
      >
        {{ item.content }}
      </p>
      <p
        v-if="item.contentEn"
        class="item_footnote en in-footer"
        :data-number="item.contentNumber"
        :data-referred-id="item.dataId"
        data-lang="en"
        :key="item.dataId + '-en'"
      >
        {{ item.contentEn }}
      </p>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    footnotes: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>
<style></style>
